<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | Colors</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }

      p {
        max-width: 700px;
      }
    </style>
  </head>
  <body>
    <p>
      Nodes can be all kinds of colors. This example shows all possible ways of
      defining colors. If you supply an object, the undefined fields will assume
      the default colors. When supplying a hex or rgb format color, it will be
      parsed and variations will be created for highlight and hover. Edges with
      inheritColor take the border colors.
    </p>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "html color", color: "lime" },
        { id: 2, label: "rgb color", color: "rgb(255,168,7)" },
        { id: 3, label: "hex color", color: "#7BE141" },
        { id: 4, label: "rgba color", color: "rgba(97,195,238,0.5)" },
        {
          id: 5,
          label: "colorObject",
          color: { background: "pink", border: "purple" },
        },
        {
          id: 6,
          label: "colorObject + highlight",
          color: {
            background: "#F03967",
            border: "#713E7F",
            highlight: { background: "red", border: "black" },
          },
        },
        {
          id: 7,
          label: "colorObject + highlight + hover",
          color: {
            background: "cyan",
            border: "blue",
            highlight: { background: "red", border: "blue" },
            hover: { background: "white", border: "red" },
          },
        },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 2, to: 6 },
        { from: 4, to: 7 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {
        nodes: { borderWidth: 2 },
        interaction: { hover: true },
      };
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
